<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/carbinet.css">
	</head>
	<style>
	
	body {
		height: 100vh;//视窗高度
		display: grid;
		place-items: center;
		font-size: 10px;
		// make the drawing bigger
		// font-size: 12px
		min-height: 37em;
		background-image:repeating-linear-gradient(to right, transparent, transparent 5px,
	                                                 rgba(0,0,0,.05) 5px, rgba(0,0,0,.1) 10px);
	}
		.cabinet {
			width: 72em;
			height: 80%;
	        border-radius: .2em;
          	background-repeat: no-repeat;
			background-image: radial-gradient(circle at top right, rgba(0,0,0,.2) 10%, transparent 20%),
			                  radial-gradient(circle at bottom left, rgba(0,0,0,.3) 10%, transparent 40%),
			                  radial-gradient(circle at 7% 0, rgba(0,0,0,.3) 3%, transparent 10%),
			                  radial-gradient(circle at 85% 80%, rgba(0,0,0,.3) 10%, transparent 20%),
			                  linear-gradient(to right, transparent 15%, rgba(0,0,0,.17) 20%, transparent 25%),
			                  linear-gradient(75deg, transparent 40%, rgba(0,0,0,.2) 50%, transparent 60%),
			                  linear-gradient(to bottom, transparent 1.1em,	
							                             rgba(0,0,0,.25)  1.1em),
			                                             rgba(0,0,0,.25)  1.2em),
			                                             transparent 1.5em)),
			                  linear-gradient(to top, transparent 1.2em,
			                                          rgba(0,0,0,.25) 1.2em,
			                                          rgba(0,0,0,.25) 1.2em),
			                                          transparent 1.4em)),
			                  repeating-linear-gradient(to bottom, transparent, transparent .2em,
			                                                                    rgba(0,0,0,.11) .3em,
			                                                                    transparent .5em),
			                  linear-gradient(130deg, sienna, saddlebrown);
			box-shadow: 3.2em 3.2em 8em 3.2em rgba(0,0,0,.6),
			            12.8em 12.8em 9.6em rgba(0,0,0,.4);			 
		}
		
		.mirror {
			width: 50%;
			height: 5em;
			left: .3em;
			bottom: 0;
			background-color: #777;
			background-image: linear-gradient(55deg, rgba(255,255,255,0) 50%, rgba(255,255,255,.15) 60%, white(0) 70%),
			                  linear-gradient(to right, saddlebrown 12%, transparent 12%);
			border-radius: 50%;
			box-shadow: 1.6em 0 .8em -.4em rgba(0,0,0,.9);
			overflow: hiddenwidth;
	}
	
/* 	.mirror:before{
		width: 5.6em;
		height: calc(100% - 2.3em);
		right: -1.6em;
		bottom: -1em;
		background-color:  rgba(255,255,255,.6);
		background-color: yellow;
		border-radius: 3.2em 3.2em .8em .8em 2.4em 2.4em 2em 2em;
		box-shadow: inset .3em 0 .5em rgba(0,0,0,.4),
		            inset .8em 0 1em rgba(0,0,0,.4);
	} */
	
	.skull {
		width: 5.6em;
		height: 5em;
		bottom: 0;
		left: 40%;
		background-color: wheat;
		background-repeat: no-repeat;
/* 		background-image: radial-gradient(ellipse at left bottom,  rgba(0,0,0,0.1) 10%, rgba(0,0,0,.6) 50%, rgba(0,0,0,0) 55%),
		                  radial-gradient(ellipse at right bottom, rgba(0,0,0,.55) 10%, rgba(0,0,0,.7) 50%, rgba(0,0,0,0) 55%),
		                  linear-gradient(to right, rgba(0,0,0,.2) 45%, rgba(0,0,0,0) 65%),
		                  radial-gradient(ellipse at left top, rgba(0,0,0,.4) 40%, rgba(0,0,0,0) 55%),
		                  radial-gradient(ellipse at right top, rgba(0,0,0,.2) 40%, rgba(0,0,0,0) 55%),
		                  repeating-linear-gradient(to right, rgba(0,0,0,.07), rgba(0,0,0,.07) 10%,
		                                                      rgba(0,0,0,.4) 11%, rgba(0,0,0,.4) 13%); */
		/* background-size: 35% 23%, 35% 23%,
		                 100% 100%,
		                 25% 120%,
		                 25% 120%,
		                 50% 6%; */
		background-position: left 101%, right 101%,
		                     0 0,
		                     left center,
		                     right center,
		                     center 101%;
		border-radius: 3.2em 3.2em .8em .8em /* /  2.4em 2.4em 2.1em 2.1em */;
	/* 	box-shadow: inset 1.1em 0 .6em rgba(0,0,0,.5),
		            inset -.6em 0 .5em rgba(0,0,0,.2),
		            1.3em .2em .5em -.3em rgba(0,0,0,.3); */
	}
	 
	</style>
	<body>
		<div class="cabinet">
  <div>
    <div class="mirror"></div>
    <div class="bottle-amber"></div>
    <div class="skull"></div>
  </div>
  <div>
    <div class="abacus"></div>
    <div class="clock"></div>
    <div class="rubiks-cube"></div>
    <div class="snowglobe"></div>
    <div class="books"></div>
  </div>
  <div>
    <div class="eyeball-jar"></div>
    <div class="pressed-leaf"></div>
    <div class="egg-jar"></div>
    <div class="bowls"></div>
  </div>
  <div>
    <div class="flag"></div>
    <div class="balloon"></div>
    <div class="cardbox"></div>
    <div class="feathers"></div>
    <div class="planter"></div>
  </div>
  <div>
    <div class="camera"></div>
    <div class="polaroid"></div>
  </div>
  <div>
    <div class="pokeball"></div>
    <div class="woodbox"></div>
  </div>
  <div>
    <div class="tubes"></div>
    <div class="viewmaster"></div>
  </div>
  <div>
    <div class="lightsaber"></div>
  </div>
  <div>
    <div class="bugs-board">
      <div class="bugs"></div>
      <div class="bugs"></div>
      <div class="bugs"></div>
      <div class="bugs"></div>
    </div>
    <div class="bust"></div>
    <div class="tray"></div>
    <div class="bottle-amber"></div>
    <div class="pencils"></div>
    <div class="twine"></div>
  </div>
  <div>
    <div class="poster"></div>
    <div class="planets"></div>
    <div class="pressed-feather"></div>
    <div class="cloche-base"></div>
    <div class="cloche-cactus"></div>
  </div>
</div>
	</body>
</html>
